<html>
<head>
<title>DIV STYLE</title>
<style>
td {color:white; font-family:Arial; font-size:14px}
input,select {color:blue; background:#eeffee; width:65px}
</style>

<script src="qblib.js"></script>


<script language="Jscript">

//****** Config: allow only "position:relative" -> for ONLINE-POSTING
var RELATIVE=true; // =false for WHOLE WEBPAGE DESIGN



function retdivStyle()
{
 var fobj= document.FO

 var reg= /gif|jpg|png/ ;
 if(fobj.TX_backgroundimage.value!='' &&  !reg.test(fobj.TX_backgroundimage.value) )
  { alert("File type isn't a image type."); return; }

 
 with(DIVSTYLE)
 {
  backgroundColor= fobj.CO_bgcolor.value

  var temp= fobj.TX_backgroundimage.value
  if( temp ) { backgroundImage= "url(" + temp + ")";  }
  else backgroundImage=''

  color= fobj.CO_color.value
  
  width= fobj.PI_width.value;
  height= fobj.PI_height.value;
  clip= 'rect(0px '+width+'px '+height+'px 0px)'

  
  if(RELATIVE==true) fobj.OP_position.selectedIndex=2; // only relative position
  position= fobj.OP_position.value
  if(position) { pixelLeft= fobj.IN_left.value; pixelTop= fobj.IN_top.value }
  else { left= ''; top= '' }  

  zIndex= fobj.IN_zindex.value;
  padding= fobj.PI_padding.value;

  textAlign= fobj.OP_textalign.value
  fontFamily= fobj.OP_fontfamily.value
  fontWeight= fobj.OP_fontweight.value
  textDecoration= fobj.OP_textdecoration.value
  fontStyle= fobj.OP_fontstyle.value

  fontSize= fobj.PI_fontsize.value
  lineHeight= fobj.PR_lineheight.value;

  window.opener.setHiddenValue();

 }


}




function init()
{
 var objF= window.opener.document.frames[window.opener.fID];
 if(!objF){alert('Please click to select the editor');return}
  
 var sel = objF.document.selection;
 if(sel.type=='None'){alert('Please select a outer of div-layer');return} 

 var Range = sel.createRange();

 DIVSTYLE= Range(0).style
 var fobj= document.FO
 with(DIVSTYLE) 
 {
  fobj.IN_zindex.value= zIndex

  fobj.CO_bgcolor.value= backgroundColor

  var temp= backgroundImage
  if(temp) temp= temp.substring(temp.indexOf("(")+1, temp.indexOf(")"))
  fobj.TX_backgroundimage.value= temp
  
  
  fobj.CO_color.value= color

  fobj.IN_left.value= pixelLeft
  fobj.IN_top.value= pixelTop
  fobj.PI_width.value= pixelWidth
  fobj.PI_height.value= pixelHeight

  fobj.PI_padding.value= parseInt(padding)
  if(isNaN(fobj.PI_padding.value)) fobj.PI_padding.value=''

  fobj.PI_fontsize.value= parseInt(fontSize)
  if(isNaN(fobj.PI_fontsize.value)) fobj.PI_fontsize.value=''

  fobj.PR_lineheight.value= lineHeight

  fobj.OP_position.value= position
  fobj.OP_textalign.value= textAlign
  fobj.OP_fontfamily.value= fontFamily
  fobj.OP_fontweight.value= fontWeight
  fobj.OP_fontweight.value= fontWeight
  fobj.OP_textdecoration.value= textDecoration
  fobj.OP_fontstyle.value= fontStyle

 }


}




/****************************************************/

</script>


</head>

<body bgcolor=menu onFocus="init()" scroll=no>

<center>
<FORM name="FO">

<TABLE bgColor=#999999 border=1 width=100% cellpading=0 cellspacing=0>
<TBODY>

<!-- 1st row -->
<TR>
<TD align=middle bgColor=#aa4444 colSpan=10>DIV STYLE</TD>
</TR>

<!-- 2nd row -->
<TR>
<TD align=right >bgcolor</TD><TD colspan=9><INPUT name=CO_bgcolor onchange="retdivStyle()"></TD>

</TR>


<!-- 3rd row -->
<TR>
<TR>
<TD align=right>textColor</TD><TD><INPUT name=CO_color onchange="retdivStyle()"></TD>

<TD align=right>Left</TD><TD><INPUT name=IN_left onchange="retdivStyle()"></TD>
<TD align=right>Top</TD><TD><INPUT name=IN_top onchange="retdivStyle()"></TD>

<TD align=right>width</TD><TD><INPUT name=PI_width onchange="retdivStyle()"></TD>
<TD align=right>height</TD><TD><INPUT name=PI_height onchange="retdivStyle()"></TD>

</TR>


<!-- 3rd row -->
<TR>
<TD align=right>fontFamily</TD>
<TD>
<select name=OP_fontfamily onchange="retdivStyle()">
<option value=''>
<option value='arial'>arial
<option value='times new roman'>times new roman
</select>
</TD>

<TD align=right>fontSize</TD><TD><INPUT name=PI_fontsize onchange="retdivStyle()"></TD>
<TD align=right>lineHeight</TD><TD><INPUT name=PR_lineheight onchange="retdivStyle()"></TD>

<TD align=right>fontWeight</TD>
<TD>
<select name=OP_fontweight onchange="retdivStyle()">
<option value=''>
<option value='100'>100
<option value='200'>200
<option value='300'>300
<option value='400'>400
<option value='500'>500
<option value='600'>600
<option value='700'>700
<option value='800'>800
<option value='900'>900
</select>
</TD>

<TD align=right>textAlign</TD>
<TD>
<select name=OP_textalign onchange="retdivStyle()">
<option value=''>
<option value='center'>center
<option value='justify'>justify
<option value='right'>right
</select>
</TD>

</TR>



<!-- 4th row -->
<TR>
<TD align=right>textDeco</TD>
<TD>
<select name=OP_textdecoration onchange="retdivStyle()">
<option value=''>
<option value='underline'>underline
<option value='overline'>overline
<option value='line-through'>line-through
<!-- <option value='blink'>blink -->
</select>
</TD>

<TD align=right>fontStyle</TD>
<TD>
<select name=OP_fontstyle onchange="retdivStyle()">
<option value=''>normal
<option value='italic'>italic
<option value='oblique'>oblique
</select>
</TD>

<TD align=right>padding</TD><TD><INPUT name=PI_padding onchange="retdivStyle()"></TD>

<TD align=right>Position</TD>
<TD>
<select name=OP_position onchange="retdivStyle()">
<option value=''>
<option value='absolute'>absolute
<option value='relative'>relative
</select>
</TD>
<TD align=right>zIndex</TD><TD><INPUT name=IN_zindex onchange="retdivStyle()"></TD>

</TR>



<tr><TD colspan=10 align=center>
<INPUT onMouseDown=setObjectColor(0,'red','retdivStyle()') title=Minus type=button value="-" style="width:22px; height:22px;  background:#FF0000; color:white">
<INPUT onMouseDown=setObjectColor(1,'red','retdivStyle()') title=Plus type=button value="+" style="width:22px; height:22px;  background:#FF0000; color:white">
&nbsp;&nbsp;
<INPUT onMouseDown=setObjectColor(0,'green','retdivStyle()') title=Minus type=button value="-" style="width:22px; height:22px;  background:#00FF00; color:black">
<INPUT onMouseDown=setObjectColor(1,'green','retdivStyle()') title=Plus type=button value="+" style="width:22px; height:22px;  background:#00FF00; color:black">
&nbsp;&nbsp;
<INPUT onMouseDown=setObjectColor(0,'blue','retdivStyle()') title=Minus type=button value="-" style="width:22px; height:22px;  background:#0000FF; color:white">
<INPUT onMouseDown=setObjectColor(1,'blue','retdivStyle()') title=Plus type=button value="+" style="width:22px; height:22px;  background:#0000FF; color:white">
&nbsp;&nbsp;

<INPUT onclick=retdivStyle() title=Button type=button value="Do" style="width:70px; height:22px; background:#aa4444; color:white">
<INPUT onclick=self.close() title=Back type=button value="Close" style="width:70px; height:22px; background:#aa4444; color:white">
&nbsp;&nbsp;

<INPUT onmousedown=setValueSmaller('retdivStyle()') title=Minus type=button value="-" style="width:22px; height:22px;  background:#aa4444; color:white">
<INPUT onmousedown=setValueBigger('retdivStyle()') title=Plus type=button value="+" style="width:22px; height:22px;  background:#aa4444; color:white">


</TD></tr>

</TBODY></TABLE>

</FORM>
</center>
</body>
</html>